<template>
  <view class="wrap" :style="{height:screenHeight+'px',background: tabStatus ? '#ffffff' : '#F2F2F2'}">
     <top-tab tabTitle="下级开户" @backClick="backClick" backColor="#5B2177"/>
		 <view class="tba-box">
			 <view class="level" :class="tabStatus ? 'acltve' : ''" @click="levelClick">下级开户</view>
			 <view class="code" :class="tabStatus ? '' : 'acltve'" @click="codeClick">邀请码</view>
		 </view>
		 <view class="level-main" v-if="tabStatus">
			 <view class="title-input">
				 <view class="title">视频标题</view>
				 <input placeholder="请输入视频标题" placeholder-style="font-size: 30rpx;color: #999999;"/>
			 </view>
			 <view class="title-input" style="margin: 23rpx 0 40rpx 0;">
				 <view class="title">设置佣金</view>
				 <input placeholder="请输入佣金比例" placeholder-style="font-size: 30rpx;color: #999999;"/>
			 </view>
			 <view class="explain">说明：这是佣金比例的描述说明</view>
			 <view class="create-code">生成邀请码</view>
		 </view>
		 <!-- 邀请码 -->
		 <view v-else class="level-code-table">
			<uni-table border stripe emptyText="暂无更多数据" >
			    <!-- 表头行 -->
			    <uni-tr>
			        <uni-th align="center" width="35">序号</uni-th>
			        <uni-th align="center" width="35">名称</uni-th>
			        <uni-th align="center" width="55">佣金比例</uni-th>
							<uni-th align="center" width="37">链接</uni-th>
							<uni-th align="center" width="42">二维码</uni-th>
							<uni-th align="center" width="114">设置</uni-th>
			    </uni-tr>
			    <!-- 表格数据行 -->
			    <uni-tr v-for="(item,index) in tabData" :key="item.id">
			        <uni-td>{{index + 1}}</uni-td>
			        <uni-td>{{item.name}}</uni-td>
			        <uni-td>{{item.rate}}</uni-td>
							<uni-td>{{item.link}}</uni-td>
							<uni-td>{{item.code}}</uni-td>
							<uni-td>
								<view class="td-copy">复制</view>
								<view class="td-blue">分享</view>
								<view class="td-delter">删除</view>
							</uni-td>
			    </uni-tr>
			</uni-table>
		 </view>
  </view>
</template>

<script>
	import topTab from '@/components/top-tabbar.vue'
  export default {
		components: { topTab },
    data() {
      return {
				screenHeight: uni.getSystemInfoSync().screenHeight, // 屏幕高度
				tabData: [
					{ id: 1, name: '荆州', rate: '5', link: 'asdfdsssssss', code: '1101'},
					{ id: 2, name: '幽州', rate: '4', link: 'asdfd', code: '1101'},
					{ id: 3, name: '冀州', rate: '3', link: 'asdfd', code: '1101'},
					{ id: 4, name: '山东', rate: '2', link: 'asdfd', code: '1101'},
					{ id: 5, name: '徐州', rate: '1', link: 'asdfd', code: '1101'}
				],
				tabStatus: true,
			}
    },
  onShow() {},
  methods: {
		// tab
		levelClick() {
			this.tabStatus = true
		},
		// tab
		codeClick () {
			this.tabStatus = false
		},
		// 返回上一页
		backClick() {
			uni.navigateTo({
			    url: '/pages/my/agency/agency'
			});
		}
	}
}
</script>

<style lang="scss" scoped>
	.wrap{
		// background: #F2F2F2;
	.tba-box{
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 20rpx 0;
		font-size: 30rpx;
		color: #B743ED;
		.level{
			width: 200rpx;
			height: 68rpx;
			border: 2rpx solid #B742ED;
			border-radius: 10rpx 0px 0px 10rpx;
			line-height: 68rpx;
			text-align: center;
			box-sizing: border-box;
		}
		.acltve{
			color: #FFFFFF !important;
			background: #B743ED !important;
		}
		.code{
			width: 200rpx;
			height: 68rpx;
			background: #FFFFFF;
			border: 2rpx solid #B742ED;
			border-radius: 0px 10rpx 10rpx 0px;
			line-height: 68rpx;
			text-align: center;
			box-sizing: border-box;
		}
	}
	.level-main{
		padding: 0 30rpx;
		.title-input{
			width: 100%;
			height: 89rpx;
			background: #F7F7F7;
			line-height: 89rpx;
			display: flex;
			align-items: center;
			.title{
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #222222;
				padding: 0 72rpx 0 28rpx;
			}
		}
		.explain{
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #666666;
			padding-left: 27rpx;
		}
		.create-code{
			width: 540rpx;
			height: 88rpx;
			background: linear-gradient(90deg, #B83DF1, #852CAE);
			border-radius: 44rpx;
			line-height: 88rpx;
			text-align: center;
			font-size: 34rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			margin: auto;
			margin-top: 600rpx;
			
		}
	}
	.level-code-table{
		/deep/ .uni-table-th {
			height: 89rpx;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #333333;
			box-sizing: border-box;
			padding: 0 !important;
			line-height: 89rpx;
		}
		 /deep/ .uni-table {
		    table-layout:fixed;
		  }
		/deep/ .uni-table-td {
			font-size: 24rpx;
			// height: 89rpx;
			// line-height: 89rpx;
			padding: 8rpx 0 !important;
			text-align: center !important;
			word-wrap:break-word;
			// overflow: hidden;
			// text-overflow:ellipsis;
			// white-space: nowrap;
		}
		.td-delter,.td-copy,.td-blue{
			display: inline-block;
			width: 60rpx;
			height: 40rpx;
			line-height: 20px;
			text-align: center;
			background: #EE4242;
			border-radius: 5rpx;
			font-size: 20rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
		}
		.td-copy{
			background: #10B86B;
		}
		.td-blue{
			background: #00A0E9;
			margin: 0 12rpx;
		}
	}
	}
</style>
